<template>
	<view class="page" style="background-color:white;">

		<u-navbar :placeholder="true" bgColor="#ffffff">
			<view class="u-nav-slot topsearch" slot="left">
				<u-search placeholder="搜索你想要的功能" v-model="keyword" :animation="false" :showAction="false"
					@input="autoSearch()" :clearabled="false" :customActionStyle="customActionStyle" />
			</view>
			<!-- <view class="u-nav-slot" slot="right">
				<view class="searchbtn">
					搜索
				</view>
			</view> -->
		</u-navbar>


		<view class="tab">
			<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
				:scroll-with-animation="true">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index"
					:class="{'tab-item-select':index==selectIndex}" :id="'tabId'+index" @click="changeTab(item,index)">
					<text>{{item.title}}</text>
					<view class="tab-item-line" v-if="index==selectIndex"></view>
				</view>
			</scroll-view>
		</view>
		<!-- <view style="background-color: aquamarine; z-index: 11111;"  @click="goSearch()">
		<u-search placeholder="日照香炉生紫烟" v-model="keyword" />
	</view> -->
		<view class="context" v-if="!isSearching">
			<swiper class="swiper" :current="selectIndex" @change="changeSwiper">
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<scroll-view scroll-y="true" class="scroll-Y-chunk" :show-scrollbar='false'>
						<view class="context-box-item">
							<view class="context-box-item-chunk" v-for="(item,indexs) in item.list" :key="indexs"
								@click="goPage(item,indexs)">

								<!-- 									<view class="context-box-item-chunk-image-shadow" style="height: 100%;width: 100%;"> -->
								<image style="width:100%; height:100%" :src="item.image" mode="widthFix"></image>
								<!-- </view> -->

								<view class="context-box-item-chunk-title">{{item.title}}</view>
								<view class="context-box-item-chunk-text">{{item.content}}</view>
								<view class="context-box-item-chunk-footer">
									咨询
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="context" v-else>
			<swiper class="swiper" :current="selectIndex" @change="changeSwiper">
				<!-- initial data list -->
				<swiper-item v-for="(item,index) in tabList" :key="index">
					<scroll-view scroll-y="true" class="scroll-Y-chunk" :show-scrollbar='false'>
						<!-- this section is the slice of fixed height -->
						<swiper-slide>
							<view class="context-box-item">
								<view class="context-box-item-chunk" v-for="(item, indexs) in filteredList1"
									:key="indexs" @click="goPage(item, indexs)">

									<image style="width:100%; height:100%" :src="item.image" mode="widthFix"></image>

									<view class="context-box-item-chunk-title">{{item.title}}</view>
									<view class="context-box-item-chunk-text">{{item.content}}</view>
									<view class="context-box-item-chunk-footer">
										咨询
									</view>
								</view>
							</view>
						</swiper-slide>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 弹窗页面 -->
		<u-popup :show="statementShows" @click.stop="" mode="center" @close="close" :closeable="false"
			:closeOnClickOverlay="false" round="14">
			<view class="statementbox">
				<view class="statement">
					<image src="../../static/home/nosay.png" mode=""></image>
				</view>
				<view class="statemens">
					<image src="../../static/home/jyla.jpg" mode=""></image>
				</view>
				<view class="statementtext">
					你的账号存在违规,请联系客服解封
					如以解封，请删除重进，有五分钟缓冲时间
				</view>
				<view class="surebtnstyle">
					<view class="surebtn" @click="close">
						联系客服
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		apiMixUrlApi
	} from "../../api/assemb";
	export default {
		data() {
			return {
				statusBarHeight: 20,
				/* 状态栏高度 */
				top: 0,
				navBarHeight: 45,
				/* 导航栏高度 */
				statementShows: false,
				searchBarTop: 0, //搜索栏的外边框高度，单位px
				searchBarHeight: 0, //搜索栏的高度，单位p
				keyword: '',
				selectIndex: 1,
				scrollTabId: 'tabId0',
				message: 'aa',
				// 自定义右侧控件样式
				customActionStyle: {
					background: '#F2F2F2',
					color: '#919191',
					fontSize: '27rpx'
				},
				tabList: [{
						title: '全部',
						type: 0,
						list: []
					},
					{
						title: '工作助理',
						type: 1,
						list: []
					},
					{
						title: '娱乐助理',
						type: 2,
						list: []
					},
					{
						title: '学习助理',
						type: 3,
						list: []
					},
				],
				aList: [], // 展示的数据
				filteredList1: [], // 新增
				isSearching: false,
				contextList: [

					{
						case: 0,
						type: 1,
						image: '../../static/create/0.png',
						title: '医疗顾问',
						content: '可以生成各种风格类型图片',
						url: '/pages_aiTools/Aidram/Aidram'
						// url: 'http://192.168.3.50/#/pages/fiction/fiction'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/2.png',
						title: '生活顾问',
						content: '帮你解决生活中的各种问题',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/fiction/fiction'
						// url: 'http://192.168.3.50/#/pages/fiction/fiction'
					},
					{
						type: 3,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/3.png',
						title: '学习顾问',
						content: '为中小学生题目提供优秀范文，帮助你学习',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/studentComposition/studentComposition'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/4.png',
						title: '面试官',
						content: '为中小学生题目提供优秀范文',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/paper/paper'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/5.png',
						title: '营销策划',
						content: '生成vlog、口播稿等短视频的拍摄大纲',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/video/video'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/6.png',
						title: '法律顾问',
						content: '一键生成各种类型的精美诗词',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/lovePoems/lovePoems'
					},

					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/7.png',
						title: '旅游出行',
						content: '一键生成新媒体文章（大约30秒）',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/newMedia/newMedia'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/8.png',
						title: '美食探店',
						content: '生成针对各种网站的内容以及文案',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/Web/Web'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/9.png',
						title: '语言翻译',
						content: '生成针对各种广告的内容以及文案',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/advertising/advertising'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/10.png',
						title: '私人厨房',
						content: '生成针对各种广告的内容以及文案',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/reputation/reputation'
					},

					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/11.png',
						title: 'AI编程',
						content: '为你的梦境进行详细分解，帮你排忧解难',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/dream/dream'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/12.png',
						title: '英文发音帮手',
						content: '为你生成各个场景下的总结',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/summarize/summarize'
					},
					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/13.png',
						title: '讲故事',
						content: '按照写作步骤一步步生成文章',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/fullText/fullText'
					},

					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/14.png',
						title: '歌词作词助手',
						content: '一键式多语言翻译，助你方便快捷',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/translate/translate'
					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/15.png',
						title: '担任辩护手',
						content: '生成各种合同模板，随意使用',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/contract/contract'
					},
					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/16.png',
						title: '说唱歌手',
						content: '生成一条多角度描述产品特色的文案',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/productDescribe/productDescribe'

					},
					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/17.png',
						title: '担任编剧',
						content: '为你的小红书笔记生成充满点击欲的标题',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/redBook/redBook'

					},
					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/18.png',
						title: '职业顾问',
						content: '一键生成带货金句，让你的商品不愁买家',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/shortVideo/shortVideo'
					},
					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/19.png',
						title: '心理医生',
						content: '为你提供文章主题的新灵感 并为其创建推文提纲',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/articleOutline/articleOutline'

					},
					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/20.png',
						title: '会计师',
						content: '为文章标题和简述进行SEO优化',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/webSEO/webSEO'
					},
					{
						type: 3,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/21.png',
						title: '投资顾问',
						content: '生成让人想下单的产品介绍文案',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/introduceProduct/introduceProduct'
					},
					{
						type: 3,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/22.png',
						title: '室内装修师',
						content: '一键生成带货标题，省时省力',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/dySell/dySell'
					},

					{
						type: 1,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/23.png',
						title: '美食评论家',
						content: '生成一些能够引起热烈讨论的好问题',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/zhihuAnswer/zhihu'
					},

					{
						type: 2,
						image: 'https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/aixz/24.png',
						title: '个人造型师',
						content: '根据输入的关键词生成引人入胜的文章标题',
						url: 'https://www.peiyine.com/aixzzj/newapp/#/pages/newMediaTitle/newMediaTitle'
					},
				],
			}
		},
		computed: {
			filteredList() {
				if (this.aList.length === 0) {
					return []
				} else {
					const reg = new RegExp(this.searchValue, 'i')
					return this.aList.filter(item => {
						return item.title.match(reg) || item.content.match(reg)
					})
				}
			}
		},

		onLoad() {
			if (uni.getStorageSync('ban')) {
				this.statementShows = true;
			} else {
				this.statementShows = false;
			}
			// console.log(uni.getStorageSync('ban'), '======================')
			// if (uni.getStorageSync('ban')) {
			// 	this.statementShows = true;
			// } else {
			// 	this.statementShows = false;
			// }
			//   console.log('onInit',this.tabList[1].List)
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			console.log(menuButtonInfo, '这是机型的大小')
			this.top = menuButtonInfo.top - 22
			let tops = this.top / 2
			console.log(tops, '对不对在这里说')
			console.log(this.top, '----------------------')
			this.searchBarTop = menuButtonInfo.top;
			this.searchBarHeight = menuButtonInfo.height;
			let that = this
			this.contextList.forEach(item => {
				switch (item.type) {
					case 1:
						that.tabList[1].list.push(item);
						break
					case 2:
						that.tabList[2].list.push(item);
						break
					case 3:
						that.tabList[3].list.push(item);
						break
					case 4:
						that.tabList[4].list.push(item);
						break
					case 5:
						that.tabList[5].list.push(item);
						break
					case 6:
						that.tabList[6].list.push(item);
						break
					case 7:
						that.tabList[7].list.push(item);
						break
					case 8:
						that.tabList[8].list.push(item);
						break
					case 9:
						that.tabList[9].list.push(item);
						break
					case 10:
						that.tabList[10].list.push(item);
						break
				}
			})
			this.tabList[0].list = this.contextList
			//   console.log("🚀 ~ file: create.vue:193 ~ onLoad ~ this.contextList:", this.contextList)
		},
		onShow() {
			console.log(uni.getStorageSync('ban'), '======================')
			if (uni.getStorageSync('ban')) {
				this.statementShows = true;
			} else {
				this.statementShows = false;
			}
			// 获取次数
			this.getFrequency();
		},
		methods: {
			// 获取次数
			getFrequency() {
				apiMixUrlApi({}, 1042, 'GetPaymentInfo').then(data => {
					if (data.descinfo == "success") {
						uni.setStorageSync('frequency', data.coins)
					}
				});
			},
			//点击跳转客服
			close() {
				uni.navigateTo({
					url: '/pages/service/service'
				})
			},
			//切换tab
			changeTab(item, index) {
				this.isSearching = false // 标记当前是否处于搜索状态
				console.log("🚀 ~ file: create.vue:197 ~ changeTab ~ item:", item, index)
				this.selectIndex = index
				let number = (index - 1) < 0 ? 0 : (index - 1)
				this.scrollTabId = 'tabId' + number
			},
			//切换swiper
			changeSwiper(e) {
				console.log("🚀 ~ file: create.vue:204 ~ changeSwiper ~ e:", e)
				this.selectIndex = e.detail.current
				let number = (e.detail.current - 1) < 0 ? 0 : (e.detail.current - 1)
				this.scrollTabId = 'tabId' + number
			},
			//跳转页面
			goPage(item) {
				console.log('item', item)
				console.log('item.url', item.url)
				// const id = 3
				if (item.url) {
					console.log('item.url', item.url)
					if (item.case == 0) {
						uni.navigateTo({
							url: item.url
						});
					}
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + item.url
						// url: '/pages/webView/webView?url=' + item.url
						// '/pages/trim/trim?targetType='+26+'&Time='+'设计师'+'&Msg='+'设计攻略'
					});
				} else {
					uni.showToast({
						title: '暂未开放',
						icon: 'none',
						duration: 2000
					});
				}
			},

			searchClick(value) {
				if (!value) { // 简化了值为空字符串和值为 null 和 undefined 的情况
					console.log('123')
					this.isSearching = false // 标记当前是否处于搜索状态
					// 如果输入的值为空则加载所有的列表
					// this.getList();
				} else {
					console.log('456')
					// 先清空展示的数据
					this.aList = []
					// 然后开始循环全部数据
					for (var i = 0; i < this.contextList.length; i++) {
						const item = this.contextList[i] // 将当前子项存储至一个变量中，避免频繁访问 this.contextList[i]
						// 判断数据里面是否有符合输入的内容
						//（核心所在，其它都是根据需求来自己写）
						if (item.title && item.title.indexOf(value) >= 0) { // 先判断该属性值是否存在再进行搜索
							this.aList.push(item)
							console.log('this.aList', this.aList)
						}
					}

					this.isSearching = true // 标记当前处于搜索状态
					this.filteredList1 = [...this.aList] // 将匹配值直接赋给 filteredList 数组，用于渲染
				}
				// 因为 aList 变量改变了，所以此处需要手动触发一次  的更新
				this.$forceUpdate() // 强制当前实例重新渲染，包括组件和子组件
			},



			toggleShowSearchResult() {
				this.showSearchResult = !this.showSearchResult
			},
			autoSearch: function() {
				this.searchClick(this.keyword)
			},
			// searchClick(value) {
			//   if (!value) {
			//     this.isSearching = false
			//     return;
			//   }
			//   this.filteredList1 = this.contextList.filter(item => item.title.indexOf(this.keyword) >=0 )
			//   this.isSearching = true
			// }

		}
	}
</script>
<style lang="less">
	.page {
		background: white;
	}

	.statementbox {
		width: 620rpx;
		// height: 572rpx;

		.statement {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			image {
				width: 114rpx;
				height: 114rpx;
			}
		}

		.statemens {
			display: flex;
			justify-content: center;
			margin-top: 50rpx;

			image {
				width: 220rpx;
				height: 66rpx;
			}
		}

		.statementtext {
			// margin-left: 300rpx;
			font-size: 26rpx;
			margin-top: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 0 115rpx;
			margin-top: 58rpx;
			margin-bottom: 48rpx;
		}

		.surebtnstyle {
			display: flex;
			justify-content: center;

			.surebtn {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				width: 440rpx;
				height: 117rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: url("https://mysmallapp.oss-cn-shanghai.aliyuncs.com/aixz/img/xzybg.png");
			}
		}
	}

	.page {
		width: 100%;
		height: 100vh;
		background-color: white;
	}

	.tab {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		z-index: 99;
		width: 100%;

		.scroll-X {
			width: 100%;
			height: 100%;
			white-space: nowrap;

			.tab-item {
				height: 100%;
				padding: 0rpx 40rpx;
				color: #8B8B8B;
				display: inline-block;
				line-height: 100rpx;
				position: relative;
				font-size: 30rpx;

				.tab-item-line {
					width: 30rpx;
					height: 6rpx;
					position: absolute;
					bottom: 14rpx;
					left: 50%;
					transform: translateX(-50%);
					background-color: #4BB591;
				}
			}

			.tab-item-select {
				color: #333333;
			}
		}


	}

	.context {
		width: 100%;
		height: calc(100vh - 100rpx);
		background-color: #F7F7F7;
		box-sizing: border-box;
		margin-top: 100rpx;

		.swiper {
			width: 100%;
			height: 100%;

			.scroll-Y-chunk {
				width: 100%;
				height: 100%;

				.context-box-item {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-content: flex-start;
					box-sizing: border-box;
					padding: 30rpx 30rpx 10rpx;

					.context-box-item-chunk {
						width: 94%;
						height: 320rpx;
						background-color: #F7F7F7;
						margin-bottom: 30rpx;
						box-sizing: border-box;
						box-shadow: 1px 1px 8px 2px #e4ecf1;
						border-radius: 20rpx;
						margin-left: 23rpx;
						position: relative;

						.context-box-item-chunk-image {
							width: 100%;
							display: flex;
							align-items: center;
							margin-top: 30rpx;

							.context-box-item-chunk-image-shadow {
								width: 100%;
								height: 100%;
								background-color: #f3efef;
							}
						}

						.context-box-item-chunk-title {
							margin-top: 10rpx;
							width: 100%;
							color: #333333;
							font-size: 28rpx;
							margin-left: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
						}

						.context-box-item-chunk-footer {
							width: 116rpx;
							height: 47rpx;
							background: #588BF7;
							border-radius: 24rpx;
							position: absolute;
							right: 40rpx;
							bottom: 32rpx;
							align-items: center;
							display: flex;
							justify-content: center;
							color: white;
						}

						.context-box-item-chunk-text {
							width: 100%;
							font-size: 22rpx;
							margin-top: 10rpx;
							margin-left: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}
					}
				}
			}
		}
	}

	.search {
		// width: 100%; 
		height: 200rpx;
		background-color: #fff;
		margin-top: 82rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;

		// border: 2px solid red;
		.searchs {
			height: 44rpx;
			width: 108rpx;
			border: 1rpx solid #929292;
			border-radius: 25.8rpx;
			text-align: center;
			position: absolute;
			top: 11.3rpx;
			right: 250rpx;
			color: #333333;
		}
	}

	.search_bto {
		width: 100rpx;
		height: 60rpx;
		background-color: #00df66;
		margin: 0 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
	}

	.search_text {
		color: #fff;
		line-height: 80rpx;
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.topsearch {
		width: 512rpx;
	}

	.searchbtn {
		width: 99rpx;
		margin-right: 200rpx;
		height: 47rpx;
		background: #FFFFFF;
		border: 1px solid #333333;
		border-radius: 39rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 27rpx;
	}
</style>